<template>
  <view class="m-input">
    <view class="ui-name">
      {{ title || '名称' }}
    </view>
    <view class="ui-input">
      <slot />
    </view>
  </view>
</template>

<script lang="ts" setup>
defineProps<{ title: string }>()
// #region Props
// #endregion
// #region Emits
// #endregion
// #region Hooks
// #endregion
// #region Computed
// #endregion
// #region Watch
// #endregion
// #region Event
// #endregion
// #region Function
// #endregion
// #region Life Cycle
// #endregion
// #region Expose
// #endregion
</script>

<style lang="scss" scoped>
.m-input {
  display: flex;
  align-items: center;
  padding: 15px 0;
  .ui-name {
    font-size: 16px;
    color: var(--text-color);
    flex: 0 0 auto;
    margin-right: 10px;
    width: 80px;
    height: 100%;
  }

  .ui-input {
    flex: 1 0 auto;
    width: 50%;
    ::v-deep(.wd-input) {
      input {
        font-size: 16px;
        color: var(--text-color);
      }
      &::after {
        display: none;
      }
    }
  }
}
</style>
